<template>
	<view class="customTab" v-if="!tabList.length <= 0" :style="{'color':textColor}">
		<view class="tabBox flex_r_sb_c" v-if="tabList.length === 4" :style="{'background':bgColor, 'paddingLeft': pad + 'rpx', 'paddingRight':pad + 'rpx'}">
			<block v-for="(item, index) in tabList" :key="index">
				<view class="flex_c_c_c" :class="selected === index?'tc_w':''" @click.stop="handleClick(item, index)">
					<text class="f_28 margin_b4" :class="[selected === index?'fw_600':'']" :style="{'color':selected===index?curText:''}">{{ item[tabKey] }}</text>
					<view class="bottomLine" :style="{'background':selected === index?curLine:''}"></view>
				</view>
			</block>
		</view>
		<view v-else class="scrollTabBox" :style="{'background':bgColor, 'paddingLeft':pad + 'rpx'}">
			<scroll-view scroll-x="true" style="width:100%;white-space:nowrap;">
				<block v-for="(item, index) in tabList" :key="index">
					<view :class="[selected === index?'tc_w':'', 'scrollItem']" :style="{'marginRight':((index === tabList.length-1)?pad:marginR) + 'rpx'}" @click.stop="handleClick(item, index)">
						<text class="f_28" :class="[selected === index?'fw_600':'']" :style="{'color':selected===index?curText:''}">{{ item[tabKey] }}</text>
						<view class="bottomLine" :style="{'background':selected === index?curLine:''}"></view>
					</view>
				</block>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	/**
	 * fr-custom-tab 自定义顶部tab栏
	 * @description 自定义顶部tab栏通用组件, 只有tab数量为4个是才是flex左右平均布局, 不为4个时为左对齐
	 * @property {Array} tabList tab栏数据源
	 * @property {String} tabKey tab栏显示的字段名
	 * @property {String} bgColor tab栏背景颜色, 默认#FFF
	 * @property {String} textColor tab字体颜色, 默认#888
	 * @property {String} curText 选中文字颜色, 默认#111
	 * @property {String} curLine 选中下划线颜色, 默认#E93323
	 * @property {Number} pad 4个tab时为其左右都加padding, 非4个时只在其左边加padding, 默认28rpx
	 * @property {Number} marginR 非4个tab时每个tab的间距, 默认48rpx
	 * @event {Function} handleClick 点击 tab 触发事件
	 */
	export default {
		name: "fr-custom-tab",
		props: {
			tabList: {
				type: Array,
				default: () => {
					return []
				}
			},
			tabKey: {
				type: String,
				default: "name"
			},
			bgColor: {
				type: String,
				default: "#FFF"
			},
			textColor: {
				type: String,
				default: "#888"
			},
			curText: {
				type: String,
				default: "#111"
			},
			curLine: {
				type: String,
				default: "#E93323"
			},
			pad: {
				type: Number,
				default: 28
			},
			marginR: {
				type: Number,
				default: 48
			},
		},
		data() {
			return {
				selected: 0,
				scrollWidth: ''
			};
		},
		watch: {},
		methods: {
			handleClick(data , i) {
				this.selected = i
				this.$emit('handleClick', data)
			}
		},
		mounted() {}
	}
</script>

<style lang="scss" scoped>
.customTab {
	width: 100%;
	height: 88rpx;
	color: #888;
}
.tabBox {
	width: 100%;
	height: 100%;
	// padding: 0 32rpx;
	box-sizing: border-box;
}
.scrollTabBox {
	width: 100%;
	height: 100%;
	line-height: 72rpx;
	// padding: 0 32rpx;
	box-sizing: border-box;
}
.scrollItem {
	display:inline-block;
	// margin-right:48rpx;
	line-height:44rpx;
}
.bottomLine {
	height: 8rpx;
	width: 50%;
	margin: 0 auto;
	border-radius: 8rpx;
}
scroll-view ::-webkit-scrollbar {
	width: 0;
	height: 0;
	background-color: transparent;
}
.selected {
	color: #FFF;
}
</style>
